@import "@name";

.details{
  background: @bg;
  overflow-x: hidden;
  height:100%;
  .detailsImages{
    .detailsImage{
      height:0;
      padding-bottom: 100%;
      background-size: cover;
      background-repeat: no-repeat;
    }
    &>.shuffling{
      position: relative;
      height:0;
      padding-bottom: 100%;
      ul{
        li{
          a{
            height:0;
            padding-bottom: 100%;
          }
        }
      }
      .dot{
        bottom:10px;
        position: absolute;
      }
    }
  }
  &>p{
    padding: 0.5em 1em;
    background: @bg-white;
    i{
      font-size: 2em;
      color: @color-main-1;
    }
    span{
      font-size: @font-size-t;
    }
  }
  .detailsPrice{
    padding:0 1em 1em 1em;
    background: @bg-white;
    justify-content: space-between;
    display: flex;
    div{
      &>span{
        font-size: @font-size-big;
        color: @color-main-1;
        span{}
      }
      label{
        padding-left: 1em;
        font-size: @font-size-t;
        text-decoration: line-through;
        color: @font-color-gray;
      }
    }
    &>label{
      display: flex;
      justify-content: flex-end;
      span{
        display: flex;
        align-items: flex-end;
        font-size: @font-size-p;
        color: @font-color-gray;
      }
    }
  }
  &>ul{
    flex-direction: column;
    margin-bottom: 50px;
    li{
      padding:0 1em;
      display: flex;
      align-items: center;
      background: @bg-white;
      border-bottom: 1px solid @line;
      height: 3.4em;
      justify-content: space-between;
      p{
        color: @font-color-gray;
        font-size: @font-size-p;
      }
      &>a{
        align-items: center;
        font-size: @font-size-t;
        width:50%;
        justify-content: flex-end;
        &>span{
        }
        i{
          font-size: @font-size-p ;
        }
      }
    }
    li:nth-of-type(1){
      justify-content: flex-start;
      height:3em;
      background: @bg;
      i{
        font-size: 1.4em;
        color: @color-main-1;
        &.active{
          color: @font-color-gray;
        }
      }
      span{
        font-size: @font-size-p;
        color: @font-color-gray;
      }
    }
    li:nth-of-type(2),li:nth-of-type(3){
      p{}
      &>a{
        width:auto;
        align-items: center;
        i{
          display: flex;
          align-items: center;
        }
        &>span{
          display: flex;
          font-size:14px;
        }
      }

    }
    li:nth-of-type(4){
      margin-top: 1em;
      height:4em;
      &>div{
        align-items: center;
        height:100%;
        width:50%;
        display: flex;
        flex-direction: row;
        &>div{
          display: flex;
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          height:80%;
          width:40%;
        }
        p{}
      }
      span{
        align-items: center;
        display: flex;
        i{
          padding-right: 0.5em;
        }
        span{
          font-size: @font-size-p;
          line-height: 20px;
          border-left: 1px solid @font-color-gray;
          padding-left: 1em;
        }
      }
    }
    li:nth-of-type(5){
      font-size: @font-size-p;
      background: none;
      justify-content: center;
      height:2.6em;
    }
  }
  .detailsBtn{
    position: fixed;
    bottom: 0;
    height:50px;
    background: @bg-white;
    width:100%;
    ul{
      height:100%;
      width:100%;
      li{
        justify-content: center;
        align-items: center;
        a{
          justify-content: center;
          align-items: center;
        }
      }
      li:nth-of-type(1),li:nth-of-type(2){
        width:14%;
        i{
          font-size: 2em;
        }
      }
      li:nth-of-type(2){
        position: relative;
        span{
          right:0.4em;
          top:0.4em;
          position: absolute;
          background: @color-main-1;
          width:16px;
          height:16px;
          border-radius: 50%;
          color: @bg-white;
          display: flex;
          justify-content: center;
        }

      }
      li:nth-of-type(3),li:nth-of-type(4){
        width:36%;
        font-size: @font-size-t;
        background: @color-main-1;
        color: @bg-white;
        a{
          color: @bg-white;
        }
      }
      li:nth-of-type(3){
        background: @color-main-2;
      }
    }
  }

}